<!-- 展示 系统名称 -->
<template>
  <div class="topBar">
    <div class="topbg">
      <p @click="toIndex" class="toindex">
        <img v-if="isPrivateFangshan" class="logo" src="../../public/logo-white-fangshan.png" alt />
        <img v-else class="logo" src="../../public/logo-white.png" alt />
      </p>
      <h1>
        {{ title }}
        <span v-if="mapTitle != 'undefined'">{{ mapTitle }}</span>
      </h1>
      <!-- v-if="show" -->
      <div class="showTime" v-if="showTime">
        <!-- <slot name="weather"></slot> -->
        <div class="time"> 
          <!-- <i class="el-icon-alarm-clock clock"></i>{{ timeLine }} -->
        </div>
  
        <el-select
          class="select-time"
          size="mini"
          :popper-append-to-body="true"
          ref="fieldSelect"
          v-model="value"
          placeholder="请选择时间区间"
          @change="change"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPrivateFangshan: process.env.VUE_APP_LOCAL == "fangshan",
      timeLine: "",
      mapTitle: "", //——绍兴市
      value: '1',
      options: [
        // {
        //   value: "0",
        //   label: "近三天",
        // },
        {
          value: "1",
          label: "近一周",
        },
        {
          value: "2",
          label: "近1个月",
        },
        {
          value: "3",
          label: "近一年",
        },
      ],
    };
  },
  props: {
    title: {
      type: String
    },
    show: {
      type: Boolean,
      default: false
    },
    showTime: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.clockTime();
  },
  methods: {
    change() {
      this.$emit("changeRange", this.value);
    },
    toIndex() {
      this.$router.push({
        path: "/index"
      });
    },
    clockTime() {
      setTimeout(() => {
        var dt = new Date();
        let Minutes = dt.getMinutes();
        let Seconds = dt.getSeconds();
        let month = parseInt(dt.getMonth() + 1);
        let day = dt.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        if (Minutes < 10) {
          Minutes = "0" + Minutes;
        }
        if (Seconds < 10) {
          Seconds = "0" + Seconds;
        }
        this.timeLine =
          dt.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          dt.getHours() +
          ":" +
          Minutes +
          ":" +
          Seconds;
        this.clockTime();
      }, 1000);
    },
    formadata() {}
  }
};
</script>

<style scoped>
@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT.TTF);
}
.topBar {
  height: 1.25rem;
  text-align: center;
  font-size: 0.3rem;
 /* line-height: 1.25rem;*/
  color: #fff;
  font-weight: 400;
  width: 98%;
  margin: 0 auto;
}
.toindex {
  cursor: pointer;
}
.logo {
  width: 3rem;
  /* height: 0.5rem; */
  /* vertical-align: middle; */
}
.logoTit {
  color: #fff;
  font-size: 0.125rem;
  vertical-align: middle;
  margin-left: 0.125rem;
}
.topbg {
  position: relative;
  height: 1.25rem;
  /* background: url(../assets/head_bg.png) no-repeat top center; */
  background: url(../assets/image/t_bg.png) no-repeat top center;
  background-size: 100% 100%;
}
.topbg p {
  position: absolute;
  left: 0.125rem;
  /* width: 2rem; */
}
.topbg h1 {
  width: 100%;
  font-size: 0.45rem;
  color: #fff;
  text-align: center;
  line-height: 1.5rem;
  /* width: calc(100% - 2.5rem); */
  display: inline-block;
  background: linear-gradient(0deg, rgb(11 98 202) 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
}
.topbg .showTime {
  position: absolute;
  top: 0;
  right: 0.25rem;
  /*line-height: 0.9375rem;*/
  font-size: 0.2rem;
  letter-spacing: 0.02rem;
  /* color: rgba(255, 255, 255, 0.7); */
  color: #fff;
}
.clock {
  margin-right: 0.1rem;
}
</style>


<style lang="scss">
.topbg {
  .toindex {
    cursor: pointer;
    margin-top: 0.2rem;
  }
}

.showTime {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.1rem;
  box-sizing: border-box;

  .time {
    font-size: 0.25rem;
    margin-top: 0.2rem;
  }

  .select-time {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #2FDFFF;
    border-radius: 5px;
    color: #fff;

    .el-input__inner {
      color: #fff;
      font-size: 14px;
    }
  }
}

.el-select-dropdown__list {
  display: flex;
  flex-direction: column;
}

</style>